<template>
  <section class="validate">

    <group class="per-info">
      <x-input label-width="1.4rem" :placeholder="$t('name')" v-model="userInfo.real_name">
        <span slot="label" style="font-size: 0.28rem">
          {{$t('name')}}:
        </span>
      </x-input>
      <x-input label-width="1.4rem"  :placeholder="$t('id num')" v-model="userInfo.id_number">
        <span slot="label" style="font-size: 0.28rem">
          {{$t('id num')}}:
        </span>
      </x-input>
    </group>
    <!--<group title="身份证号">-->
      <!--<x-input type="text" placeholder="输入身份证号"></x-input>-->
    <!--</group>-->
    <div class="upload">
      <div class="upload-title">{{$t('upload')}}</div>
      <div class="card-img">
        <div class="card front" v-bind:style="{backgroundImage:'url(' + userInfo.img_front + ')'}">
          <img src="../../assets/img/car-bg.png" alt="" class="hide frontImg">
          <span class="hide frontImg">{{$t('front')}}</span>
          <input type="file" accept="image/*" @change="uploadChange($event,'front')" class="hide frontImg">
        </div>
        <div class="card back" v-bind:style="{backgroundImage:'url(' + userInfo.img_back + ')'}">
          <img src="../../assets/img/car-bg.png" alt="" class="hide backImg">
          <span class="hide backImg">{{$t('back')}}</span>
          <input type="file" accept="image/*" @change="uploadChange($event,'back')" class="hide backImg">
        </div>
      </div>
    </div>
    <div class="btn-box">
      <x-button type="primary" :show-loading="showLoading" @click.native="submit" :disabled="isdisabled">{{$t('confirm')}}</x-button>
    </div>
  </section>
</template>

<i18n>
  title.validatefir:
    en: Validate
    zh-CN: 实名认证
  name:
    en: Real Name
    zh-CN: 真实姓名
  id num:
    en: ID number
    zh-CN: 身份证号码
  upload:
    en: Upload ID Card Image
    zh-CN: 上传身份证
  front:
    en: Click to upload front image
    zh-CN: 点击上传正面照
  back:
    en: Click to upload back image
    zh-CN: 点击上传反面照
</i18n>

<script>
  import {XInput, Group, XButton} from 'vux'
  export default {
    name: 'editNickName',
    components: {
      XInput,
      Group,
      XButton
    },
    data () {
      return {
        style: 'font-size: 0.28rem',
        showLoading: false,
        imgDataUrlFront: '',
        imgDataUrlBack: '',
        isdisabled: false,
        userInfo: {
          real_name: '',
          id_number: '',
          img_back: '',
          img_front: ''
        }
      }
    },
    created () {
      this.init()
    },
    methods: {
      init () {
        // 获取认证信息，更换信息
        var vue = this
        vue.get({
          url: `/api/account/get_auth_status?token=${localStorage.token}`,
          success: function (data) {
            console.log(data)
            if (data.code === 1) {
              var hideDom = document.getElementsByClassName('hide')
              if (data.data.status === 1) {
                vue.userInfo = data.data
                console.log(hideDom)
                vue.isdisabled = true
                for (let i = 0; i < hideDom.length; i++) {
                  hideDom[i].style.display = 'none'
                }
              }
              if (data.data.status === 2) {
                vue.userInfo = data.data
                hideDom = document.getElementsByClassName('hide')
                console.log(hideDom)
                vue.isdisabled = true
                for (let i = 0; i < hideDom.length; i++) {
                  hideDom[i].style.display = 'none'
                }
              }
              if (data.data.status === -1) {
                vue.userInfo = data.data
                vue.$vux.alert.show({
                  title: vue.$t('info'),
                  content: data.data.reason
                })
              }
            } else if (data.code === 0) {
              vue.$vux.toast.show({
                text: `${data.msg}`,
                type: 'text'
              })
            }
          },
          error: function (data) {
            console.log(data)
          }
        })
      },
      uploadChange (event, flag) {
        let vue = this
        let file = event.target.files[0]
        console.log(file)
        let formdata = new FormData()
        formdata.append('file', file)
        formdata.append('token', localStorage.token)
        this.$vux.toast.show({
          text: '正在上传'
        })
        this.$http.post('/api/common/upload', formdata, {'Content-Type': 'multipart/form-data'})
          .then(({data}) => {
            if (data.code === 0) {
              vue.$vux.toast.show({
                text: `${data.msg}`,
                type: 'text'
              })
            } else if (data.code === 1) {
              // 清除内容更换成上传的照片
              if (flag === 'front') {
                this.userInfo.img_front = data.data.url
                let frontDom = document.getElementsByClassName('frontImg')
                for (let i = 0; i < frontDom.length; i++) {
                  frontDom[i].style.opacity = '0'
                }
              } else {
                this.userInfo.img_back = data.data.url
                let backDom = document.getElementsByClassName('backImg')
                for (let i = 0; i < backDom.length; i++) {
                  backDom[i].style.opacity = '0'
                }
              }
            }
          })
      },
      submit () {
        let flag = true
        for (var prop in this.userInfo) {
          this.userInfo[prop] === '' ? flag = false : flag = true
          console.log(this.userInfo[prop] === '')
          console.log(this.userInfo[prop] === flag)
        }
        if (flag === true) {
          let vue = this
          let params = {}
          params.real_name = this.userInfo.real_name
          params.id_number = this.userInfo.id_number
          params.IDBack = this.userInfo.img_back
          params.IDFront = this.userInfo.img_front
          params.token = localStorage.token
          this.post({
            url: `/api/account/real_name_auth`,
            params: params,
            success: (data) => {
              vue.$vux.toast.show({
                text: `${data.msg}`,
                type: 'text'
              })
              if (data.code === 1) {
                vue.$router.back(-1)
              }
            }
          })
        } else {
          this.$vux.toast.show({
            text: `请输入完整的信息`,
            type: 'text'
          })
        }
      }
    }
  }
</script>

<style lang="less" >
  .validate {
    padding: 15px 0;
    height: 100%;
    background-color: #fff;
    box-sizing: border-box;
    /*.btn-box {*/
      /*position: fixed;*/
      /*bottom: 0;*/
      /*width: 100%;*/
      /*padding: 15px;*/
      /*box-sizing: border-box;*/
    /*}*/
    .per-info{
      border-top: 0px;
      .weui-cell{
        height: 1rem;
        padding-bottom: 0px;
        padding-top: 0px;
        font-size: 0.28rem;
      }
      .weui-cells:before{
        border-top: 0px solid red;
      }
    }
    .upload{
      .upload-title{
        padding: 0.45rem 0.3rem;
        font-size: 0.28rem;
      }
      .card-img{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        .card{
          background-size: contain !important;
          background-repeat: no-repeat !important;
          background-position: center !important;
          display: flex;
          flex-direction: column;
          align-items: center;
          position: relative;
          width: 5rem;
          height: 3.12rem;
          background: #edf2f8;
          border-radius: 10px;
          margin-bottom: 0.6rem;
          input{
            position:absolute;
            top: 0px;
            left: 0px;
            display: inline-block;
            width: 100%;
            height: 100%;
            opacity: 0;
          }
          img{
            width: 1rem;
            height: 1rem;
            margin-top: 0.8rem;
            margin-bottom: 0.28rem;
          }
        }
      }
    }
  }
  .btn-box{
    padding: 0 0.3rem;
    button{
      background: #179b16;
      color: #fff;
      border: 1px solid #57a94f;
      padding: 0 8px;
      border-radius: 3px;
    }
  }
</style>
